<template>
    <div class="cinema-list">
        <div v-for="(l,i) in cinemas" :key="l.cinemaId" class="cinema-item" :class="i" >
            <router-link :to="filmId?{
                name:'cinema-detail',
                params:{
                    cinemaId:l.cinemaId,
                    filmId:filmId,
                    date:date
                }
            }:{
                name:'cinema-detail',
                params:{
                    cinemaId:l.cinemaId,
                }
            }" >
                <div class="cinema-item-top">
                    <p class="left">
                        {{l.name}}
                    </p>
                    <p class="right">
                      ¥  {{l.lowPrice/100}} 起
                    </p>
                </div>
                 <div class="cinema-item-bottom">
                    <p class="left">
                        {{l.address}}
                    </p>
                    <p class="right">
                      {{'距离未知'}}
                    </p>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        cinemas:Array,
        filmId:[Number,String],
        date:[Number,String]
    }
}
</script>

<style lang="scss" scoped>
.cinema-list{
    .cinema-item{
        padding:15px; 
        background: #fff;
        &-top{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                font-size: 15px;
                margin-bottom: 5px;
                color: #191a1b;
                text-overflow: ellipsis;
                white-space: nowrap;
                width:275px;
            }
            .right{
                font-size: 13px;
                color: #ff5f16;
            }
        }
        &-bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top:5px;
            .left{
                    font-size: 13px;
                    color: #797d82;
                    overflow: hidden;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width:275px;
            }
            .right{
                font-size: 13px;
                color: #797d82;
            }
        }
    }
}
</style>

